import React from 'react'
import { Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { withRouter } from 'react-router-dom'

import './index.css'
import storage from '../utils/storageUtil'
import { formatTime } from '../utils/timeUtil'
import menuList from '../config/menuConfig'

class Header extends React.Component {
    state = {
        currentTime: formatTime(new Date()),
        userInfo: storage.getUserStorage()
    }

    getSubjectName = (menuList) => {
        const {pathname} = this.props.location
        menuList.forEach((ele) => {
            if(!ele.children){
                if(ele.path === pathname){
                    console.log(ele.name)
                    return ele.name
                }
            }else{
                return this.getSubjectName(ele.children)
            }
        })
    }

    getTitle = () => {
        const path = this.props.location.pathname
        let title
        menuList.forEach((item) => {
          if (item.path === path) {
            title = item.name
          } else if (item.children) {
            // 在item.children 这个数组中寻找合适的 item
            //indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引
            //find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
            const cItem = item.children.find(cItem => path.indexOf(cItem.path) === 0)
            if (cItem) {
              title = cItem.name
            }
          }
        })
        console.log(title)
        return title
      }

    handLogout = () => {
        Modal.confirm({
            title: '确定要退出吗?',
            cancelText: '取消',
            okText: '确定',
            icon: <ExclamationCircleOutlined />,
            content: '',
            onOk: () => {
                this.props.history.replace('/')
                storage.removeUserStorage()
            },
            onCancel() {
            },
        });
    }

    componentDidMount() {
        this.intervalId = setInterval(() => {
            this.setState({
                currentTime: formatTime(new Date())
            })
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.intervalId)
    }

    render() {
        return (
            <div>
                <div className="header-top">
                    欢迎，{this.state.userInfo.username}
                    <a href='javascript:void()' onClick={this.handLogout}>退出</a>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {this.getTitle()}
                    </div>
                    <div className="header-bottom-right">
                        <span>{this.state.currentTime}</span>
                        <img src='http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/1.png'></img>
                        <span>26 ~ 14℃</span>
                        <span>晴天</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)